<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			img{
				width:100vw;
			}
			li{
				display: inline-block;
				/* 显示模式：行内-块级元素 */
				border-radius: 10px;
				/* 边框圆角设置:10像素 */
				width: 100px;
				/* 宽度设置：100像素*/
			}
			ul{
				height: 40px;
				/* 高度设置:100像素*/
				text-align: center;
				/* 文字（行内元素）位置：中心对齐*/
				padding-left: 0;
				/* 内边距设置 ：0*/
				line-height: 40px;
				/* 文字行高设置:40像素; */
				border-radius: 10px;
				/* 边框圆角设置:10像素 */
				box-shadow: 0 0 10px black;
				/* 块级元素-阴影设置:向右偏移,向下偏移,阴影大小,阴影颜色 */
			}
			body{
				background-color: #f5cc27;
				/* 背景颜色设置: #000 自己挑 */
			}
			a{
				text-decoration: none;
				color: black;
				display: block;
				border-radius: 10px;
			}
			a:hover{
				background-color: #ffff27;
				box-shadow: 0 0 10px black;
			}
		</style>
	</head>
	<body>
		<ul>
			<li><a href="http://bilibili.com">菜单一</a></li>
			<li><a href="position定位.html">菜单二</a></li>
			<li><a href="position定位.html">菜单三</a></li>
		</ul>
		<img src="皮卡丘.jpeg" alt="这是皮卡丘">
	</body>
</html>